<template>
  <div class="stats-container">
    <div class="stats-panel-head stats-form" style="margin: 6px 7.5px;background-color: transparent;">
      <!-- <div class="stats-btn-group" style="padding: 0;">
        <button type="button" :class="{'stats-checked': selectType == 'call-in'}" @click="selectCallType('call-in')">呼入</button>
        <button type="button" :class="{'stats-checked': selectType == 'call-out'}" @click="selectCallType('call-out')">呼出</button>
      </div> -->
      <div style="flex:1;display: flex;justify-content: flex-end;align-items:center;">
        <div class="stats-form-group">
          <!-- <div id="date-range-count" class="stats-form-daterange">
            <span>{{countTimeStart}} - {{countTimeEnd}}</span>
            <b class="caret"></b>
          </div> -->
          <date-picker @datePicker="chooseCountDate" />
        </div>
      </div>
    </div>

    <div class="stats-station-head">

      <div v-if="selectType =='call-in'" class="stats-station-card">
        <p>{{$t('report.callcenter.text1')}}</p>
        <h3>{{dealingCount | convertZero}}</h3>
        
        <div class="stats-station-card-bottom">
          <h5>{{$t('report.callcenter.text2')}}：{{notDealCount | convertZero}}</h5> 
          <h5>{{ $t('report.callcenter.text3')}}：{{ parseFloat((dealingRate || 0)*100).toFixed(2) }}%</h5>
        </div>
      </div>

      <div v-if="selectType =='call-out'" class="stats-station-card">
        <p>{{ $t('report.callcenter.text4') }}</p>
        <h3>{{dealingCount | convertZero}}</h3>
        <div class="stats-station-card-bottom">
          <h5>{{ $t('report.callcenter.text5')}}：{{notDealCount | convertZero}}</h5>
          <h5>{{$t('report.callcenter.text3')}}：{{ parseFloat((dealingRate || 0)*100).toFixed(2) }}%</h5>
        </div>
      </div>

      <div class="stats-station-card">
        <p>{{ $t('report.callcenter.text6') }}</p>
        <h3>{{solvedCount | convertZero}}</h3>
        <div class="stats-station-card-bottom">
          <h5>{{$t('report.callcenter.text7')}}：{{unsolvedCount | convertZero}}</h5>
          <h5>{{$t('report.callcenter.text8')}}：{{ parseFloat((solvedRate || 0)*100).toFixed(2) }}%</h5>
        </div>
      </div>

      <div class="stats-station-card">
        <p>{{$t('report.callcenter.text9')}}</p>
        <h3>{{totalDealings | fmt_h_m_s}}</h3>
        <div class="stats-station-card-bottom">{{$t('report.callcenter.text10')}}：{{avgDealings >> 0 | fmt_h_m_s}}</div>
      </div>

      <div v-if="selectType =='call-in'" class="stats-station-card">
        <p>{{ $t('report.callcenter.text11') }}</p>
        <h3>{{avgWaitingTimes >> 0 | fmt_h_m_s}}</h3>
      </div>

    </div>

    <div class="stats-row">
      <staff-category-chart :call-type="selectType" :chart-type="type" :export-track="exportTrack"></staff-category-chart>
    </div>

    <div class="stats-row" ref="callTypeChart">
      <div class="stats-panel">
        <div class="stats-panel-head stats-form">
          <h3>{{ $t('report.callcenter.text12')}}</h3>
          <div class="stats-form-group">
            <!-- <div id="date-range" class="stats-form-daterange">
              <span>{{timeStart}} - {{timeEnd}}</span>
              <b class="caret"></b>
            </div> -->
            <date-picker @datePicker="chooseDate" />
          </div>
        </div>
        <div class="stats-panel-body">
          <keep-alive>
            <component
              :is="chart"
              :chart-data="pieData"
              :time-start="timeStart"
              :time-end="timeEnd"
              :export-track="exportTrack"
              :call-type="selectType">
            </component>
          </keep-alive>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
/* eslint-disable no-undef */
import _ from 'lodash'

import CallTypeChart from './CallTypeChart.vue'
import CallConsultChart from './CallConsultChart.vue'
import StaffCategoryChart from './StaffCategoryChart.vue'

export default {
  name: 'callcenter',
  data() {
    return {
      selectType: 'call-in',
      hideEmptyRecord: true,
      dealingCount: '--',
      notDealCount: '--',
      dealingRate: '--',
      solvedCount: '--',
      unsolvedCount: '--',
      solvedRate: '--',
      totalDealings: '--',
      avgDealings: '--',
      avgWaitingTimes: '--',

      loading: true,

      pieData: {},
      countTimeStart: '',
      countTimeEnd: '',
      timeStart: '',
      timeEnd: '',
      teamId: '',
      chart: 'call-consult-chart',
      evaluateConfig: {},
      type: '', // 判断入口
      isFirst: true,
      isFirstTime: true,
    }
  },
  methods: {
    exportTrack(isExportAll, tab) {
      window.parent.postMessage({
        message: 'exportTrack',
        isExportAll,
        chartType: this.type,
        tab
      }, '*')
    },
    selectCallType(type) {
      this.selectType = type
      // 坐席统计 通话类型统计 重新初始化
      this.initStationHead()
      this.renderPie()
    },
    chooseChart(chart) {
      this.chart = chart
    },
    async initStationHead() {
      try {
        let {result} = await this.fetchStationCountData()

        this.dealingCount = result.dealingCount
        this.notDealCount = result.notDealCount
        this.dealingRate = result.dealingRate
        this.solvedCount = result.solvedCount
        this.unsolvedCount = result.unsolvedCount
        this.solvedRate = result.solvedRate
        this.totalDealings = result.totalDealings
        this.avgDealings = result.avgDealings
        this.avgWaitingTimes = result.avgWaitingTimes
      } catch (error) {
        console.log(error)
      }
    },
    fetchStationCountData() {
      const url = `/api/callcenter/outside/callcenter/callrecord/statistics/${this.type === 'incoming-call' ? 'normalRecord4Banner' : 'dialoutRecord4Banner'}`  
      return this.$http.get(url, {
        startDateTime: this.countTimeStart,
        endDateTime: this.countTimeEnd,
      })
    },

    initPie(start, end) {

      this.timeStart = start
      this.timeEnd = end

      this.renderPie()
    },
    chooseDate(data) {
      this.timeStart = data[0]
      this.timeEnd = data[1]
      if(this.isFirst){
        this.isFirst = false
        setTimeout(()=> {
          this.renderPie()
        }, 1000)
      } else {
        this.renderPie()
      }

      this.type && this.$track.commonFn.chartTrack(this.type, 'REPORT_SEARCH_TIME', this.$track)
    },
    chooseCountDate(data) {
      this.countTimeStart = data[0]
      this.countTimeEnd = data[1]
      if(this.isFirstTime){
        this.isFirstTime = false
        setTimeout(()=> {
          this.initStationHead()
        }, 1000)
      } else {
        this.initStationHead()
      }

      this.type && this.$track.commonFn.chartTrack(this.type, 'REPORT_SEARCH_TIME', this.$track)
    },
    async renderPie() {
      let instance = this.$loading.show(this.$refs.callTypeChart)
      try {
        let pieData = await this.fetchEvenCount()
        instance.hide()
        this.pieData = _.assign({}, this.pieData, pieData.result)
      } catch (error) {
        instance.hide()
        console.log(error)
      }
    },
    fetchEvenCount() {
      let params = {
        startDateTime: this.timeStart,
        endDateTime: this.timeEnd,
        hideEmptyRecord: this.hideEmptyRecord
      }
      const url = `/api/callcenter/outside/callcenter/callcenterzxsort/statistics/${this.type === 'incoming-call' ? 'normalCallRecord' : 'dialoutCallRecord'}`  
      return this.$http.get(url, params)
    },
  },
  created(){
    this.type = window.location.href.split('type=')[1];
  },
  mounted() {
    this.type = window.location.href.split('type=')[1]

    this.selectType = this.type === 'exhale' ? 'call-out' : 'call-in'

    this.chart = this.selectType === 'call-out' ? 'call-type-chart' : 'call-consult-chart'
    let initData = JSON.parse(sessionStorage.getItem('_init_data'))
    this.evaluateConfig = initData.evaluateConfig || {}
  },
  components: {
    [CallConsultChart.name]: CallConsultChart,
    [CallTypeChart.name]: CallTypeChart,
    [StaffCategoryChart.name]: StaffCategoryChart
  }
}
</script>

<style lang="scss">
// @import '../common/common.scss';
.stats-station-head {
  display: flex;
  flex-flow: row nowrap;
  padding: 5px 7.5px;
  justify-content: flex-end;
}

.stats-task-head {
  display: flex;
  flex-flow: row nowrap;
  padding: 5px 7.5px;
  justify-content: flex-end;
}

.stats-station-card {
  flex: 1;
  margin-left: 15px;

  border-radius: 2px;
  background-color: #fff;
  text-align: center;

  p {
    padding: 15px 0 8px;
    margin: 0;
    font-size: 14px;
  }

  h3 {
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    margin: 0;
    padding: 5px 0;

    a {
      color: #2d9cf5;
    }
  }

  &:first-child {
    margin-left: 0;
  }

  .stats-station-card-bottom {
    margin-bottom: 15px;
    h5 {
      font-weight: 400;
      margin-bottom: 10px;
    }
  }
}

.stats-task-table-header {
  display: flex;
  flex-flow: row nowrap;
  padding: 5px;

  h3 {
    font-size: 14px;
    flex: 1;
    margin: 0;
    line-height: 30px;
  }

  button {
    margin-left: 5px;
  }
}

#call-type-chart,
#call-consult-chart {
  height: 520px;
}
#call-type-chart2 {
  height: 260px;
}
</style>
